<style lang="scss" scoped>
.reply-info {
    font-size: 0.815em;
    color: #9499a0;
    display: flex;
    align-items: center;
    margin-top: 6px;

    span {
        margin-right: 10px;
    }

    .dianzan,
    .huifu {
        cursor: pointer;
    }

    .dianzan i {

        font-size: 13px;
    }
}

::v-deep a.reply-to-user {
    color: #008ac5;
    margin: 6px;
}

::v-deep .emoji-pic {
    width: 20px;
    height: 20px;
    vertical-align: text-bottom;
}

i.renzheng {
    color: #ea387e;
    font-size: 1.2em;
    margin-left: 2px;
    margin-right: 4px;
}

::v-deep ul.el-pager .number {
    font-weight: normal;
    min-width: 24px;
}

.reply {

    // border: 1px solid red;
    display: flex;

    .reply-avatar {
        width: 48px;
        height: 48px;
        margin-right: 8px;

        a {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            i {
                font-size: 40px;
                border: 1px solid #90949e;
                border-radius: 50%;
            }

            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

    }

    .reply-right-container {

        flex: 1;

        color: #333;
        border-bottom: 1px solid #eff2f3;
        margin-bottom: 15px;

        .reply-main {

            margin-bottom: 10px;

            .reply-nickname {
                font-size: 0.9em;
                padding-top: 6px;
                margin-bottom: 6px;
            }

            .reply-content {
                margin-bottom: 6px;
                color: #333333;
            }


        }

        .reply-sub {
            padding: 5px 0px 5px 40px;
            // border: 1px solid red;
            color: #333333;

            .reply-sub-item {
                position: relative;
                margin-bottom: 10px;

                .reply-sub-item-avatar {
                    position: absolute;
                    left: -38px;
                    top: -2px;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    overflow: hidden;

                    i {
                        font-size: 24px;
                        color: #90949e;
                    }

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .reply-sub-user-info {
                    font-size: 0.9em;
                    display: inline-flex;
                    align-items: center;
                    margin-right: 6px;

                }

                .reply-sub-content {
                    margin-bottom: 6px;
                    color: #333;
                    display: inline;
                    word-break: break-all;

                }
            }
        }

        .reply-total-count {
            font-size: 13px;
            color: #9499a0;
            cursor: pointer;
            display: inline-flex;
            vertical-align: top;
            margin-bottom: 5px;

            &:hover {
                color: #49b1f5;
            }
        }

    }


}
</style>

<template>
    <div class="reply">

        <!-- 评论-头像部分 -->
        <div class="reply-avatar">
            <a href="#">
                <i v-if="!reply.avatar" class="iconfont icon-touxiang"></i>
                <img v-else :src="reply.avatar" alt="">
            </a>
        </div>

        <!-- 评论-右侧部分 -->
        <div class="reply-right-container">

            <!-- 主评论 -->
            <div class="reply-main">
                <div class="reply-nickname">
                    <a href="#">
                        {{ reply.nickname }}
                        <i v-show="reply.isV == 1" class="renzheng iconfont icon-renzhengguanli"></i>
                    </a>
                </div>
                <div class="reply-content">
                    <span v-html="reply.commentContent"></span>
                </div>
                <div class="reply-info">
                    <span>{{ reply.createTime }}</span>
                    <span class="dianzan">
                        <i class="iconfont icon-iconfontzhizuobiaozhun023148"></i>
                        <span v-if="reply.likeNum > 0">{{ reply.likeNum }}</span>
                    </span>
                    <span class="huifu" @click="showCommentBox(reply, 1)">回复 </span>
                </div>
            </div>

            <!-- 次级评论 -->
            <!-- {{ reply.children }} - {{ reply.children.length }} - {{ reply.children && reply.children.length > 0 }} -->
            <div class="reply-sub" v-show="reply.children && reply.children.length > 0">

                <!-- 次级评论项 -->
                <div class="reply-sub-item" v-for="subComment in reply.children" :key="subComment.id">

                    <!-- 次级评论项用户头像, 绝对定位 -->
                    <div class="reply-sub-item-avatar">
                        <a href="#">
                            <i v-if="!subComment.avatar" class="iconfont icon-touxiang"></i>
                            <img :src="subComment.avatar" alt="">
                        </a>
                    </div>

                    <!-- 次级评论项用户昵称, 行内样式 inline-flex -->
                    <a href="#" class="reply-sub-user-info">
                        {{ subComment.nickname }} <i v-show="subComment.isV == 1"
                            class="renzheng iconfont icon-renzhengguanli"></i>
                    </a>

                    <!-- 次级评论项回复内容, 行内样式 inline-->
                    <div class="reply-sub-content" v-html="subComment.commentContent"></div>

                    <!-- 次级评论项回复信息 -->
                    <div class="reply-info">
                        <span>{{ subComment.createTime }}</span>
                        <span class="dianzan">
                            <i class="iconfont icon-iconfontzhizuobiaozhun023148"></i>
                            <span v-if="subComment.likeNum > 0">{{ subComment.likeNum }}</span>
                        </span>
                        <span class="huifu" @click="showCommentBox(subComment, 2)">回复 </span>
                    </div>

                </div>
            </div>

            <!-- 共多少条回复, 大于3条的时候(不包括3), 才有必要显示。
                 默认只显示前三条(但实际上已经请求第一页的数据,每页数据默认5条。如果超过一页,才显示分页。)-->
            <div v-if="reply.replyTotalCount > 3 && !showMoreReply" @click="showMore" class="reply-total-count">
                共 {{ replyTotalCount }} 条回复, 点击查看
            </div>

            <!-- 分页显示 -->
            <div class="paging" v-if="showMoreReply && this.replyTotalCount > this.pageSize">
                <el-pagination layout="total,pager" @current-change="handleCurrentChange" :total="replyTotalCount"
                    :page-size="5" hide-on-single-page></el-pagination>
            </div>

            <!-- 评论框 -->
            <EmojiText v-show="commentBoxShow" ref="commentBoxRef" :avatarUrl="userInfo.avatar" @comment="doComment"
                :after-comment="doAfterComment" :placeholder="placeholder" />

        </div>

    </div>
</template>

<script>
import EmojiText from '@/components/EmojiText/EmojiText'
import { postComment, getReplyCommentsByPage } from '@/api/commentApi'
export default {
    name: 'Reply',
    props: {
        reply: { // 评论数据实体, 由父组件传过来
            type: Object
        },
        commentId: { // 当前子组件的索引, 通过属性传过来, 主要用于在父组件中能从v-for循环到的组件中标识到唯一到当前组件
            type: Number
        },
        parentId: { // 其实就是父评论的
            type: Number
        },
        topicId: {
            type: Number
        }
    },
    data() {
        return {
            placeholder: '',
            commentBoxShow: false, /* 是否显示评论框 */
            parentCommentId: '', /* 回复的父评论id（一级评论的id，它会用于查询所有的子评论） */
            replyCommentId: '',   /* 回复的评论id （对哪条评论进行回复）*/
            replyNickname: '',    /* 用于记录要回复的昵称 @某某某 */
            replyTotalCount: 0,  /* 一级评论下共多少条回复 */
            replyUserInfoId: null,
            showMoreReply: false, /* 是否显示更多的回复, 用来记录用户有没有点过查看更多回复 */
            currPage: 1, /* 当前页 */
            pageSize: 5,/* 每页条数 */
            totalPage: 0, /* 总页数 */
        }
    },
    mounted() {
        /* 根据父组件传过来的数据, 初始化 总条数 和 总页数 */
        this.replyTotalCount = this.reply.replyTotalCount
        this.totalPage = Math.ceil(this.replyTotalCount / this.pageSize)
    },
    computed: {

        userInfo() {
            return this.$store.state.user.userInfo || {}
        }

    },
    methods: {

        getSubCommentList() {
            /* 请求完数据后, 直接将接口返回的list, 替换掉children, 让vue处理列表渲染 */
            getReplyCommentsByPage({ currPage: this.currPage, pageSize: this.pageSize, data: { commentId: this.reply.id } }).then(res => {
                this.reply.children = res.list
                this.replyTotalCount = res.totalCount
                this.totalPage = Math.ceil(res.totalCount / res.pageSize)
            })
        },

        /* 请求指定页的数据 */
        handleCurrentChange(currPage) {
            this.currPage = currPage
            this.getSubCommentList()
        },

        /* 点击查看更多 */
        showMore() {
            this.showMoreReply = true
            this.currPage = 1
            this.getSubCommentList()
        },

        /* 隐藏评论框, 供父组件调用(父组件可通过$refs拿到当前子组件后,调用此方法即可) */
        hideCommentBox() {
            this.commentBoxShow = false
        },

        /* 显示评论框 */
        showCommentBox(reply, type) { // 用type去区分是点的哪里的回复
            if (type == 1) {
                this.commentBoxShow = !this.commentBoxShow
            } else if (type == 2) {
                this.commentBoxShow = true
            }

            console.log(reply, this.commentBoxShow);

            if (this.commentBoxShow) { // 如果最终是要做显示

                /* 如果是一级评论, 那么直接取它的id作为父评论id; 
                   如果不是一级评论, 那么取它的父级评论的id作为父id */
                if (!reply.parentId) {
                    this.parentCommentId = reply.id
                } else {
                    this.parentCommentId = reply.parentId
                }

                this.replyCommentId = reply.id                 /* 回复的评论id （对哪条评论进行回复） */
                this.replyUserInfoId = reply.replyUserInfoId   /* 对谁进行回复(用户id) */

                if (reply.parentId) {
                    this.placeholder = `回复 @${reply.nickname}`
                    this.replyNickname = reply.nickname
                } else {
                    this.placeholder = ``
                }

                this.$nextTick(() => {
                    this.$refs['commentBoxRef'].focus()
                })

                /* 让父组件去关闭其它一级评论下的输入框，因为只能展示一个评论框 */
                this.$emit('closeOtherCommentBoxExcept', this.commentId)
            } else {
                this.parentCommentId = null
                this.replyCommentId = null
                this.replyUserInfoId = null
                this.placeholder = ``
                this.replyNickname = null
            }

        },

        /* 发表评论 */
        doComment(commentContent) {

            let content = ''

            // 如果不是对一级评论进行回复, 那就要加上@ 回复谁
            if (this.parentCommentId !== this.replyCommentId) {
                content = `<a href="#" class="reply-to-user">@${this.replyNickname} :</a>`
                commentContent = content + commentContent
            }
            postComment({
                replyUserId: this.replyUserId,
                commentContent,
                parentId: this.parentCommentId,
                replyCommentId: this.replyCommentId,
                replyUserInfoId: this.replyUserInfoId,
                type: 1,
                topicId: this.topicId
            }).then(res => {
                
                this.$refs['commentBoxRef'].clearTextareaContent()
                // console.log(this.reply.children,'this.reply.children1');
                this.reply.children.push(res) // 虽然不可以直接改父组件通过prop传过来的数据, 但是我不直接改prop, 
                // console.log(this.reply.children,'this.reply.children2');
                // 而是改传过来的prop里面的属性，意思是：不能直接改this.reply，但是可以改this.reply里面的children
                // 更新总条数,
                this.replyTotalCount++
                this.$toast('success', '回复成功')
            })
        },

        /* 在评论之后, 关闭评论框 */
        doAfterComment() {
            this.commentBoxShow = false
        }
    },
    components: {
        EmojiText
    }
}
</script>

